{extend name="$adminPage"}

{block name="headStyle"}
<style type="text/css">
    .yunj-icon-doc {
        display: flex;
        flex-wrap: wrap;
    }

    .yunj-icon-doc li {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 100px;
        color: #8a8a8a;
    }

    .yunj-icon-doc li i {
        font-size: 28px !important;
    }

    .yunj-icon-doc li .icon-name {
        margin: 5px 0;
    }

    .yunj-icon-doc li .icon-class {
        text-align: center;
    }
</style>
{/block}

{block name="content"}
<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
    </ul>
    <div class="layui-tab-content">
    </div>
</div>

{/block}

{block name="script"}
<script type="text/javascript">
    layui.use(['yunj', "jquery"], function () {
        let win = window;
        let doc = document;
        let $ = layui.jquery;

        function render() {
            // icon.json 数据获取详见根目录dev.md
            yunj.file_content(`/static/yunj/json/icon.json?${YUNJ_VERSION}`).then(data => {
                let tabBoxEl = $('.layui-tab');
                let titleHtml = '';
                let contentHtml = '';
                data.forEach(v => {
                    // title
                    titleHtml += `<li>${v.title}</li>`;
                    // content
                    let vContentHtml = `<blockquote class="layui-elem-quote"><p>${v.desc}</p></blockquote>
                                <pre class="layui-code">
使用示例如下：
&lt;i class="${v.baseClass} ${v.icon[0].class}"&gt;&lt;/i&gt;
</pre>`;
                    // iconDoc
                    let iconDocHtml = '';
                    v.icon.forEach(item => {
                        iconDocHtml += `<li>
                                        <i class="${v.baseClass} ${item.class}"></i>
                                        <div class="icon-name">${item.name}</div>
                                        <div class="icon-class" title="点击复制" data-class="${v.baseClass} ${item.class}">${v.baseClass}<br>${item.class}</div>
                                    </li>`;
                    });
                    contentHtml += `<div class="layui-tab-item">
                                    ${vContentHtml}
                                    <ul class="yunj-icon-doc">${iconDocHtml}</ul>
                                </div>`;

                });
                tabBoxEl.find('.layui-tab-title').html(titleHtml);
                tabBoxEl.find('.layui-tab-content').html(contentHtml);
                tabBoxEl.find('.layui-tab-title li:first').addClass('layui-this');
                tabBoxEl.find('.layui-tab-content .layui-tab-item:first').addClass('layui-show');
            });
        }

        $(doc).ready(function () {
            render();
            // 点击复制
            $(doc).on('click', '.yunj-icon-doc>li .icon-class', function (e) {
                yunj.copy($(this).data('class'));
                e.stopPropagation();
            })
        });
    });
</script>
{/block}